<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'工人详情'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div v-if="leftInfo.AfterMarketState === 10">
            <div class="analyItem" v-for="(item, index) in personList" :key="index">
                <p class="analyItemTit tx-center" >级别{{item.level}}</p>
                <div class="analyItemCon">
                    <div class="col-md-12 flex">
                        <div class="col-md-4"><span class="cLigthGray pr8">天数</span><span>{{item.hour ? item.hour.toFixed(2) : ''}}</span></div>
                        <div class="col-md-4"><span class="cLigthGray pr8">金额</span><span>{{item.cost ? item.cost.toFixed(2) : ''}}元</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="leftInfo.AfterMarketState > 10">
             <!-- :class="['analyItem', item.workerUploadCraftCount === null ? '' : 'anItemBor']" -->
            <div :class="['analyItem', item.workerUploadCraftCount === null ? '' : 'anItemBor']" v-for="(item, index) in personDetailList" :key="index" @click="workerEvalClick(item.workerId,item.workerUploadCraftCount)">
                <p class="analyItemTit tx-center analyShallowGreen" >订单{{index + 1}}</p>
                <div class="analyItemCon">
                    <div class="col-md-12 flex">
                        <div class="col-md-4"><span class="cLigthGray pr8">订单号</span><span class="cBlue">{{item.orderCode   ? item.orderCode  : ''}}</span></div>
                        <div class="col-md-4"><span class="cLigthGray pr8">姓名</span><span>{{item.workerName  ? item.workerName : ''}}</span></div>
                        <div class="col-md-4"><span class="cLigthGray pr8">类型</span><span>{{item.workType  ? item.workType : ''}}</span></div>
                        <div class="col-md-4"><span class="cLigthGray pr8">打卡</span><span>{{item.signCount !== null || item.signCount !== '' ? item.signCount : ''}}天</span></div>
                        <div class="col-md-4"><span class="cLigthGray pr8">计划</span><span>{{item.workMoney !== null || item.workMoney !== '' ? item.workMoney.toFixed(2) : ''}}元</span></div>
                        <div class="col-md-4"><span class="cLigthGray pr8">实际</span><span>{{item.projectMoney !== null || item.projectMoney !== '' ? item.projectMoney.toFixed(2) : ''}}元</span></div>
                        <span class="mark">{{item.orderStage | OrderState()}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem" v-if="leftInfo.AfterMarketState === 10">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="col-md-4"><span class="cLightGray pr8">天数</span><span>{{ workDay }}</span></div>
                <div class="col-md-4"><span class="cLightGray pr8">金额</span><span>{{ workMoney }}元</span></div>
            </div>
        </div>
        <div class="analyItem"  v-if="leftInfo.AfterMarketState > 10">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="col-md-3"><span class="cLightGray pr8">个数</span><span>{{ personDetailList.length }}</span></div>
                <div class="col-md-3"><span class="cLightGray pr8">工时</span><span>{{ workAuditDays }}元</span></div>
                <div class="col-md-3"><span class="cLightGray pr8">计划总额</span><span>{{ workAuditMoney }}元</span></div>
                <div class="col-md-3"><span class="cLightGray pr8">实际总额</span><span>{{ workReMoney }}元</span></div>
            </div>
        </div>
        <!-- <div class="tx-center">
            <input type="button" class="uiBtn-normal uiBtn-blue" value="确定">
        </div> -->
    </div>
    <!-- 四段渲染容器 -->
    <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
        <!-- 客户评价 -->
        <rx-evaluate v-if="currentIndex === 0" :key="0" :workId="workerId"></rx-evaluate>
    </transition-group>
</div>
</template>
<script>

import { mapGetters } from 'vuex'
import { getTypeOfWorkDetails, getOrderWorkerWagesList } from '../Resources/Api/order'
import rxEvaluate from './person/personEval'
export default {
    components: {
        rxEvaluate
    },
    data () {
        return {
            currentIndex: '-1', // 当前的Index
            params: [], // 二段传参 工种名称，工种编号
            personList: [], // 人工信息
            personDetailList: [], // 准备 在施详情
            workerId: '' // 工人编号
        }
    },
    computed: {
        ...mapGetters(['leftInfo']),
        workMoney () {
            let cost = 0
            this.personList.forEach(item => {
                cost += item.cost
            })
            return cost.toFixed(2)
        },
        workDay () {
            let days = 0
            this.personList.forEach(item => {
                days += item.hour
            })
            return days.toFixed(2)
        },
        workAuditMoney () {
            let workMoney = 0
            this.personDetailList.forEach(item => {
                workMoney += item.workMoney
            })
            return workMoney.toFixed(2)
        },
        workAuditDays () {
            let signCount = 0
            this.personDetailList.forEach(item => {
                signCount += item.signCount
            })
            return signCount.toFixed(2)
        },
        workReMoney () {
            let projectMoney = 0
            this.personDetailList.forEach(item => {
                projectMoney += item.projectMoney
            })
            return projectMoney.toFixed(2)
        }
    },
    created () {
        this.params = this.$route.params
        this.load()
    },
    methods: {
        // 获取数据
        load () {
            // 用_this 代替this
            let _this = this
            _this.loading = true
            // 接口请求
            if (this.leftInfo.AfterMarketState === 10) {
                let proparm = {
                    id: _this.params.workerTypeId,
                    rwdID: _this.leftInfo.orderno
                }
                // 审计详情
                getTypeOfWorkDetails(proparm).then((result) => {
                    if (result.data.statusCode === 1) {
                        _this.personList = result.data.body
                    }
                }).catch((err) => {
                    console.log(err)
                })
            } else {
                // 准备 在施详情
                let proparm = {
                    workerTypeId: _this.params.workerTypeId,
                    orderNo: _this.leftInfo.orderno
                }
                // 审计详情
                getOrderWorkerWagesList(proparm).then((result) => {
                    if (result.data.StatusCode === 1) {
                        _this.personDetailList = result.data.Body
                    }
                }).catch((err) => {
                    console.log(err)
                })
            }
        },
        // 四段返回按钮
        clickFourShow () {
            this.currentIndex = undefined
            this.load()
        },
        // 点击弹出客评价(workerUploadCraftCount 为工艺个数)
        workerEvalClick  (workerId, workerUploadCraftCount) {
            if (workerUploadCraftCount === null) {
                return false
            } else {
                this.currentIndex = 0
                this.workerId = workerId
            }
        }
    },
    watch: {
        $route () {
            this.params = this.$route.params
            this.load()
        }
    },
    filters: {
        OrderState (state) {
            let statename = ''
            switch (state) {
            case -5:
                statename = '待审'
                break
            case -4:
                statename = '拒单'
                break
            case -3:
                statename = '退单'
                break
            case -2:
                statename = '选单'
                break
            case -1:
                statename = '待接'
                break
            case 0:
                statename = '待分配'
                break
            case 1:
                statename = '待确认'
                break
            case 2:
                statename = '待施'
                break
            case 3:
                statename = '施工'
                break
            case 4:
                statename = '竣审'
                break
            case 5:
                statename = '返工'
                break
            case 6:
                statename = '结算'
                break
            case 7:
                statename = '评价'
                break
            case 8:
                statename = '历史'
                break
            }
            return statename
        }
    }
}
</script>
<style lang="scss" scoped>
    .mark{
        width: 100px;
        height: 25px;
        line-height: 23px;
        text-align: center;
        font-size: 12px;
        color: #f33;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -12.5px;
    }
</style>
